import { Button, Form, Input, message } from "antd";
import { useForm } from "antd/es/form/Form";
import styles from './index.less';
import { updatePassword } from "@/services/login";

const SetPassword = () => {
    const [form] = useForm()
    const userInfo = JSON.parse(localStorage.getItem('userInfo'))

    const editPassword = () => {
        form.validateFields().then((values) => {
            updatePassword({
                oldPassword: values.oldPassword,
                newPassword: values.password,
                phone: userInfo.phone
            }).then((res) => {
                if (res.code === 200) {
                    message.success('修改成功')
                } else {
                    message.warning(res.message)
                }
            })
        })
    }
    return (
        <div className={styles.page}>
            <Form
                name="basic"
                form={form}
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 18 }}
                initialValues={{ remember: true }}
                autoComplete="off"
                labelAlign="left"
                >
                <Form.Item
                label="旧密码"
                name="oldPassword"
                rules={[{ required: true, message: '请输入密码' }, {max: 100, message: '密码长度不能超过100' }, {min: 6, message: '密码长度不能小于6' }]}
                >
                    <Input.Password />
                </Form.Item>
                <Form.Item
                label="新密码"
                name="password"
                rules={[{ required: true, message: '请输入密码' }, {max: 100, message: '密码长度不能超过100' }, {min: 6, message: '密码长度不能小于6' }]}
                >
                    <Input.Password />
                </Form.Item>

               
                    <Form.Item
                    label="再次输入密码"
                    name="confirm_password"
                    rules={[{ required: true, message: '请再次输入密码' },
                        {max: 100, message: '密码长度不能超过100' },
                        ({ getFieldValue }) => ({
                            validator(_, value) {
                              if (!value || getFieldValue('password') === value) {
                                return Promise.resolve();
                              }
                              return Promise.reject(new Error('两次输入密码不一致!'));
                            },
                          }),
                    ]}
                    >
                        <Input.Password />
                    </Form.Item>

                <Form.Item label={null}>
                            <Button style={{ marginRight: 10}} onClick={editPassword} type="primary" htmlType="submit">
                                修改
                            </Button>
                </Form.Item>
            </Form>
        </div>
    )
}

export default SetPassword;